<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>基本演示</legend>
</fieldset>
<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">获取选中节点数据</button>
    <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
    <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>
</div>
<div id="test1"  class="demo-tree-more" ></div>
<script>
    layui.use(['tree', 'util','layer','jquery'], function(){
        var tree = layui.tree;
        var layer = layui.layer;
        var  util = layui.util;
        var $ = layui.jquery;

        $.ajax({
            "url":"${pageContext.request.contextPath}/category/selectAll",
            "type":"get",
            "dataType":"json",
            "success":function(result){
             console.log(result);
             tree.render({
                 showCheckbox:true,
                 showLin:false,
                 elem:"#test1"
                 ,id: 'demoId1'
                 ,data:result.data
                 ,isJump: true //是否允许点击节点时弹出新窗口跳转
                 ,click: function(obj) {
                     var data = obj.data;  //获取当前点击的节点数据
                     layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                 }
            });
             }
        })


        //按钮事件
        util.event('lay-demo', {
            getChecked: function(othis){
                var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

                layer.alert(JSON.stringify(checkedData), {shade:0});
                console.log(checkedData);
            }
            ,setChecked: function(){
                tree.setChecked('demoId1', [12, 16]); //勾选指定节点
            }
            ,reload: function(){
                //重载实例
                tree.reload('demoId1', {

                });

            }
        });

})
</script>
</body>
</html>